import React from 'react';
import { Spin } from 'antd';
import { isEqual, isEmpty } from 'lodash';
import {WeaErrorPage, WeaTools, WeaTable, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;
import {openLinkUrl, formatData} from '../../util/common';

//内容组件
class EContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ewidth: 0
        }
    }

    componentDidUpdate(){
        const { config={} } = this.props;
        const { ewidth } = this.state;
        const { eid } = config.params;
        if(!isEqual(ewidth,$(`#content_${eid}`).width())){
            this.setState({
                ewidth: $(`#content_${eid}`).width(),
            });
        }
    }

    componentDidMount() {
        const { config={} } = this.props;
        const { eid } = config.params;
        this.setState({
            ewidth: $(`#content_${eid}`).width(),
        });
    }

    render() {
        const { ewidth } = this.state;
        const { config={}, edata, fontSizeMp, refresh } = this.props;
        const { esetting={}, data,tabids } = edata;
        const { linkmode, showMode, eTitleColor="", eLayout ,eWidth, eHeight, eTitleRow} = esetting;

        let quickentryTitleStyle = {

        }
        if(showMode == '0' || showMode == '1' || showMode == '2' ){
            quickentryTitleStyle = {
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
            }
        }else {
            quickentryTitleStyle = {
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                lineHeight:eHeight+'px',
            }
        }

        let rongqiStyle = {}
        if(eTitleRow == '1'){
            if(showMode == '0' || showMode == '1' || showMode == '2' ){
                quickentryTitleStyle = {
                    WebkitLineClamp: '2',
                    webkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                    width:eWidth,
                    textOverflow: 'ellipsis',
                    display:'-webkit-box',
                    wordBreak:'break-all',
                    wordWrap:'break-word',
                    height:'35px',
                }
            }else{
                quickentryTitleStyle = {
                    transform: 'translateY(-50%)',
                    top: '50%',
                    right: '0px',
                    position: 'absolute',
                    WebkitLineClamp: '2',
                    webkitBoxOrient: 'vertical',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    display:'-webkit-box',
                    wordBreak:'break-all',
                    wordWrap:'break-word',
                    height:'35px',
                }
            }

            rongqiStyle = {
                position:'relative',
            }
        }

        let {perNum} = esetting;
        const { eid } = config.params;
        let { fontStyle,header } = config.item;
        if(!isEmpty(fontSizeMp)) fontStyle = fontSizeMp;
        esetting.fontStyle = fontStyle;
        const { contentview = {} } = config.item;
        let cstyle = {};
        if(header.displayPosition && header.displayPosition == 'bottom' && tabids && tabids.length > 1){
            if(contentview.style.height){
                cstyle = {height: parseInt(contentview.style.height)-32+"px",overflow: "auto"};
            }else {
                cstyle = {height: contentview.style.height,overflow: "auto"};
            }
        }else if(tabids && tabids.length == 1){
            cstyle = {height: contentview.style.height,overflow: "auto"};
        }


        let num = (parseInt(perNum) + 1) * 10;
        const length = data.length;
        let widthAll = parseInt((ewidth - num) / perNum);
		let width = 1 / perNum * 100 + '%';
        let lineNum = Math.ceil(length/parseInt(perNum));
        if(perNum==0) {
            width=0;
        }

        if((showMode == '0' || showMode == '1' || showMode == '2') && width < 75) {
            width = eWidth;
            if(perNum == 0) {
                perNum = parseInt(parseInt(ewidth) /85);
                width = 1 / perNum * 100 + '%';
            }else {
                perNum = parseInt(parseInt((ewidth - num) / 75));
            }
            lineNum = Math.ceil(length/parseInt(perNum))

        }else if((showMode == '3' || showMode == '4' || showMode == '5')&&  width < 150){
            width = 150;
            if(perNum == 0) {
                perNum = parseInt(parseInt(ewidth) /160);
                width = 1 / perNum * 100 + '%';
            }else {
                perNum = parseInt(parseInt((ewidth - num) / 150));
            }
            lineNum = Math.ceil(length/parseInt(perNum))
        }
        let quickEntryCom = <div/>
        let quickEntryCom2 = <div/>

        const lastLineIndex = (lineNum - 1) * parseInt(perNum);
		const lastLineNum = length - lastLineIndex;
		const lastlieItemWidth = 1/lastLineNum * 100 + '%';
        let itemStyle = {
            borderBottom: '2px dashed #E9E9E9',
            borderRight: '2px dashed #E9E9E9',
        }
        let lastLineStyle= {};
        if(eLayout && eLayout== '1' && lastLineIndex > 0) {
            lastLineStyle={display: 'block', margin: '0 auto',width: (length-lastLineIndex) * widthAll + 'px' }
            if(showMode == '2' || showMode == '5'){
                lastLineStyle.width = parseFloat(lastLineStyle.width) + parseInt(lastLineNum) * 10 + 'px';
            }
        }

        let normalLineStyle = {width: parseFloat(widthAll) * perNum + 'px', margin: '0 auto'};
        if(showMode == '2' || showMode == '5'){
            normalLineStyle = {width: parseFloat(widthAll) * perNum + parseInt(perNum) * 10 + 'px', margin: '0 auto'};
        }
        if(eLayout == '0') {
            normalLineStyle= {};
        }

		let lastLineItemStyle= {
			 width: width+''.indexOf('%') == '-1' ? width+ 'px' : width
		}
		if(eLayout == '1') {
			if(showMode == '2' || showMode == '5'){
				lastLineItemStyle= {
					width: `calc(${lastlieItemWidth} - 10px)`
				}
			} else {
				lastLineItemStyle= {
					width: lastlieItemWidth
				}
			}
        }else{
			if(showMode == '2' || showMode == '5'){
				lastLineItemStyle= {
					width: width+''.indexOf('%') == '-1' ? width+ 'px' : `calc(${width} - 10px)`
				}
			} else {
				lastLineItemStyle= {
					width: width+''.indexOf('%') == '-1' ? width+ 'px' : width
				}
			}
		}
        switch (showMode) {
            case '0': // 上下布局-无背景色/分割线
                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if(index>= lastLineIndex) {
                        return;
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : width , float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                            <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px'}} src={item.picture} alt/>
                            <div className={'quickentry-title1'} style={{...quickentryTitleStyle,color: eTitleColor}}>{item.title}</div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                                <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px'}} src={item.picture} alt/>
                                <div className={'quickentry-title1'} style={{...quickentryTitleStyle, color: eTitleColor}}>{item.title}</div>
                            </div>
                        )
                    }

                })
                break;
            case '1': // 上下布局-有分割线
                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if(index>= lastLineIndex) {
                        return;
                    }else if((index+1) % parseInt(perNum) == 0) {
                        itemStyle = {
                            borderBottom: '2px dashed #E9E9E9',
                        }
                    }else {
                        itemStyle = {
                            borderBottom: '2px dashed #E9E9E9',
                            borderRight: '2px dashed #E9E9E9',
                        }
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : width, float: 'left', cursor: 'pointer', ...itemStyle}} >
                            <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px',marginTop:'10px'}} src={item.picture} alt/>
                            <div className={'quickentry-title1'} style={{ ...quickentryTitleStyle ,color: eTitleColor}}>{item.title}</div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if(index+1 == length) {
                        itemStyle={}
                    }else {
                        itemStyle = {
                            borderRight: '2px dashed #E9E9E9',
                        }
                    }
                    if (index >= lastLineIndex) {
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)}
                                 style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', ...itemStyle}}>
                                <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px',marginTop:'10px'}} src={item.picture} alt/>
                                <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: eTitleColor}}>{item.title}</div>
                            </div>
                        )
                    }

                })
                break;
            case '2': // 上下布局-有背景色

                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if(index>= lastLineIndex) {
                        return;
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : `calc(${width} - 10px)`, float: 'left', cursor: 'pointer', marginTop: '10px', marginLeft: '10px', backgroundColor: item.backGroundColor}} >
                            <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px',marginTop:'10px'}} src={item.picture} alt/>
                            <div className={'quickentry-title1'} style={{...quickentryTitleStyle ,color: eTitleColor}}>{item.title}</div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', marginTop: '10px', marginLeft: '10px', backgroundColor: item.backGroundColor}} >
                                <img className={'quickentry-img'}  style = {{width: eWidth+'px',height: eHeight+'px',marginTop:'10px'}} src={item.picture} alt/>
                                <div className={'quickentry-title1'} style={{ ...quickentryTitleStyle ,color: eTitleColor}}>{item.title}</div>
                            </div>
                        )
                    }

                })
                break;
            case '3': //左右布局-无背景色/分割线
                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if(index>= lastLineIndex) {
                        return;
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : width, float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                            <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                            <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left'}} className={'quickentry-img'} src={item.picture} alt/>
                            <div style={{width: '75px',color: 'rgb(0, 0, 0)',cursor: 'pointer',display: 'block',float: 'left', color: eTitleColor,...quickentryTitleStyle }} className={'quickentry-title1'}>{item.title}</div>
                            </div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', marginTop: '10px'}} >
                                <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                                    <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left'}} className={'quickentry-img'} src={item.picture} alt/>
                                    <div style={{width: '75px',color: 'rgb(0, 0, 0)',cursor: 'pointer',display: 'block',float: 'left', color: eTitleColor,...quickentryTitleStyle }} className={'quickentry-title1'}>{item.title}</div>
                                </div>
                            </div>
                        )
                    }

                })
                break;
            case '4': //左右布局-有分割线
                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if(index>= lastLineIndex) {
                        return;
                    }else if((index+1) % parseInt(perNum) == 0) {
                        itemStyle = {
                            borderBottom: '2px dashed #E9E9E9',
                        }
                    }else {
                        itemStyle = {
                            borderBottom: '2px dashed #E9E9E9',
                            borderRight: '2px dashed #E9E9E9',
                        }
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : width, float: 'left', cursor: 'pointer', ...itemStyle}} >
                            <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                                <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                                <div style={{width: '75px',color: 'rgb(0, 0, 0)',cursor: 'pointer',display: 'block',float: 'left', color: eTitleColor, ...quickentryTitleStyle}} className={'quickentry-title1'}>{item.title}</div>
                            </div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        if(index+1 == length) {
                            itemStyle={}
                        }else {
                            itemStyle = {
                                borderRight: '2px dashed #E9E9E9',
                            }
                        }
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', ...itemStyle}} >
                                <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                                    <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                                    <div style={{width: '75px',color: 'rgb(0, 0, 0)',cursor: 'pointer',display: 'block',float: 'left', color: eTitleColor, ...quickentryTitleStyle}} className={'quickentry-title1'}>{item.title}</div>
                                </div>
                            </div>
                        )
                    }

                })
                break;
            case '5': //左右布局-有背景色
                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if(index>= lastLineIndex) {
                        return;
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : `calc(${width} - 10px)`, float: 'left', cursor: 'pointer', marginTop: '10px', marginLeft: '10px', backgroundColor: item.backGroundColor}} >
                            <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                                <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                                <div style={{width: '75px',color: 'rgb(0, 0, 0)',cursor: 'pointer',display: 'block',float: 'left', color: eTitleColor, ...quickentryTitleStyle}} className={'quickentry-title1'}>{item.title}</div>
                            </div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', marginTop: '10px', marginLeft: '10px', backgroundColor: item.backGroundColor}} >
                                <div style={{margin: '5px auto', width: (parseInt(eWidth)+75)+'px', height:  eHeight+'px',...rongqiStyle}}>
                                    <img style={{display: 'block', width: eWidth+'px', height: eHeight+'px', float: 'left', marginTop: '0px'}} className={'quickentry-img'} src={item.picture} alt/>
                                    <div style={{width: '75px',color: 'rgb(0, 0, 0)',cursor: 'pointer',display: 'block',float: 'left', color: eTitleColor, ...quickentryTitleStyle}} className={'quickentry-title1'}>{item.title}</div>
                                </div>
                            </div>
                        )
                    }

                })
                break;
            default:
                quickEntryCom = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        return;
                    }
                    return (
                        <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: width+''.indexOf('%') == '-1' ? width+ 'px' : width, float: 'left', cursor: 'pointer', marginTop: '10px',...rongqiStyle}} >
                            <img className={'quickentry-img'} style = {{width: eWidth+'px',height: eHeight+'px'}} src={item.picture} alt/>
                            <div className={'quickentry-title1'} style={{...quickentryTitleStyle, color: eTitleColor}}>{item.title}</div>
                        </div>
                    )
                })
                quickEntryCom2 = data && data.length>0 && data.map((item, index) => {
                    if (index >= lastLineIndex) {
                        return (
                            <div title={item.title} onClick={() => openLinkUrl(item.link, linkmode)} style={{width: lastLineItemStyle.width, float: 'left', cursor: 'pointer', marginTop: '10px',...rongqiStyle}} >
                                <img className={'quickentry-img'} style = {{width: eWidth+'px',height: eHeight+'px'}} src={item.picture} alt/>
                                <div className={'quickentry-title1'} style={{...quickentryTitleStyle, color: eTitleColor}}>{item.title}</div>
                            </div>
                        )
                    }

                })
        }
        return <div>
            <div className="tabContant" id={`tabcontant_${eid}`} style={{height: cstyle.height}}>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ry12js`} spinning={refresh}>
                    <div>
                        <div style={normalLineStyle}>{quickEntryCom}</div>
                        <div style={lastLineStyle}>{quickEntryCom2}</div>
                    </div>
                </Spin>
            </div>
         </div>;
    }
}

class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
            return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@wi3900`} msg = { hasErrorMsg ? this.props.error : getLabel(385218,"对不起，该页面异常，请联系管理员！") }/>
        );
    }
}
EContent = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(EContent);
export default EContent;